<template>
  <div>
    <el-button
      :class="islog ? 'actived' : ''"
      @click="islog = true"
    >
      操作日志
    </el-button>
    <!-- <el-button
      :class="islog ? '' : 'actived'"
      @click="islog = false"
    >
      设备日志
    </el-button> -->
    <div v-show="islog">
      <el-table      
        ref="table"
        :data="operData"
        style="width: 100%"
        :cell-style="{ padding: 6 + 'px' }"
        :row-style="{ height: 0 + 'px' }"
        stripe
        :height="tableHeight"
      >
        <el-table-column
          prop="logId"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="用户名"
          width="80"
        >
          {{ 123 }}
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="时间"
          width="220"
        ></el-table-column>
        <el-table-column
          prop="logType"
          label="操作类型"
        ></el-table-column>
        <el-table-column
          prop="operatingState"
          label="操作状态"
        ></el-table-column>
      </el-table>
      <el-pagination
        v-if="total > 8"
        background
        :current-page="currentPage"
        :page-sizes="[limit, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <div v-show="!islog">
      <el-table
      
        :data="eqData"
        style="width: 100%"
      >
        <el-table-column
          prop="indx"
          label="序号"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="eqname"
          label="设备名称"
          width="230"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="状态描述"
          width="190"
        ></el-table-column>
        <el-table-column
          prop="date"
          label="时间"
        ></el-table-column>
      </el-table>
      <el-pagination
        v-if="total2 > 8"
        background
        :current-page="currentPage"
        :page-sizes="[13, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { userLog } from "@/api";
export default {
  name: "Systemlog",
  data() {
    return {
      islog: true,
      currentPage: 1,
      limit: 13,
      total: 5,
      total2:0,
      tableHeight: 700,
      eqData: [
        {
          indx: 1,
          eqname: "1#-201-1 左前方摄像机",
          address: "设备上线",
          date: "2021-08-04 10:06",
        },
      ],
      operData: [
        {
          browser: null,
          createTime: "2021-09-17 16:25:27", // 时间
          description: "开始考试", // 描述
          exceptionDetail: null,
          ip: null,
          logId: "5964", // 序号
          logType: "控制", // 类型
          operatingState: "成功", // 状态
          params: "examinationId=448&roomId=202121001",
          performMethod: null,
          returnData: null,
          userName: null, // 用户名
          userRole: null, // 用户角色
        },
      ],
    };
  },

  mounted() {
    setTimeout(()=>{
      this.tableHeight= window.innerHeight - this.$refs.table.$el.getBoundingClientRect().top - 70;
      this.limit = Math.floor( this.tableHeight / 37)
      this.querUserLog()

    },10)
    
  },
  methods: {
    querUserLog() {
      userLog({
        page: this.currentPage,
        limit: this.limit,
      }).then((res) => {
        this.operData = res.data;
        this.total = res.count;
      }).then(()=>{
        
      });
    },
    handleSizeChange(val) {
      this.limit = val;
      this.querUserLog();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.querUserLog();
    },
  },
};
</script>
<style lang="scss" scoped>
.el-button {
  float: left;
  margin-bottom: 15px;
}
.el-table {
  margin-bottom: 15px;
}
.actived {
  background: #02a7f0;
  color: white;
  border-color: #02a7f0;
}
</style>
